<template>
     <view class="shopCart">
        <block v-if=' storeInfo.disable && storeInfo.reserve_start == "0" '>
            <view class='closed_banner'>本店打烊啦</view>
        </block>
        <block v-if=' !storeInfo.disable || storeInfo.reserve_start != 0 '>
            <view class="content">
                <view class="content-left" @click="toggleList()">
                    <view class="logo-wrapper">
                        <view v-if="header == 'buy_together'" class="logo" :class=" totalCount_all>0 ? 'yidian' : 'weidian' "></view>
                        <view v-else class="logo" :class=" totalCount>0 ? 'yidian' : 'weidian' "></view>                        
                        <view class="num" v-if="totalCount> 0 && header != 'buy_together' ">{{totalCount}}</view>
                        <view class="num" v-if="totalCount_all > 0 && header == 'buy_together' ">{{totalCount_all}}</view>
                    </view>
                    <block v-if="header == 'buy_together'">
                        <view class="order_price">
                            <view class="white_text">￥{{totalPrice_all}}<text class="my_order">(我已点¥{{self_money}}元)</text></view>
                            <view class="gray_text">
                                <block v-if="(sid == 'oneself' || listServiceType != 0) && listServiceType != ''">
                                    下单可自取
                                </block>
                                <block v-else>
                                    另需配送费￥{{ deliveryPrice }}元/可自取
                                </block>
                            </view>
                        </view>   
                    </block>
                    <block v-else>
                        <view class="order_price">
                            <view class="white_text">￥{{totalPrice}}</view>
                            <view class="gray_text" v-if="storeInfo.open_oneself">
                                <block v-if="(sid == 'oneself' || listServiceType != 0) && listServiceType != ''">
                                    下单可自取
                                </block>
                                <block v-else-if="storeInfo.open_oneself == 0">
                                    另需配送费￥{{ deliveryPrice }}元  
                                </block>
                                <block v-else>
                                   另需配送费￥{{ deliveryPrice }}元/可自取
                                </block>
                            </view>
                        </view>  
                    </block>
                </view>
                    <block v-if="header == 'buy_together'">
                        <block v-if="is_master">
                            <view class="content-right" :class=" totalPrice_all >=  storeInfo.start_send_price && !must ? 'enough' : 'not-enough' " >
                               <!-- <block v-if="!must"> -->
                                    <block v-if="totalPrice_all ==0">
                                          <view class="pay">
                                              <text >¥{{storeInfo.start_send_price}}起送</text>
                                          </view>
                                    </block>
                                    <block v-else-if="diffPrice>0">
                                          <view class="pay">
                                              <text>还差{{diffPrice}}元起送</text>
                                          </view>
                                    </block>
                                    <block v-else-if="totalPrice_all >= storeInfo.start_send_price">
                                          <block v-if="must">
                                              <view class="pay">
                                                  <view class="pay">
                                                      <text>去结算</text>
                                                  </view>
                                              </view>
                                          </block>
                                          <block v-else>
                                              <view class="pay" @click="pay()">
                                                  <view class="pay">
                                                      <text>去结算</text>
                                                  </view>
                                              </view>
                                          </block>
                                    </block>  
                                <!-- </block>
                                <block v-else>
                                    <view class="pay">
                                        <view class="pay">
                                            <text>下单前请选必选品</text>
                                        </view>
                                    </view>
                                </block>  -->
                            </view>
                        </block>
                        <block v-else>
                            <view class="content-right" :class=" self_money>0 ? 'enough' : 'not-enough' " >
                                <block v-if="self_money > 0">
                                    <block v-if=" showGetUser_1 && showGetUserStorage == '0' ">
                                        <button class="pay" hover-class="none" open-type="getUserInfo" @click="getUserInfo">
                                            <text>选好了</text>
                                        </button>
                                    </block>
                                    <block v-else>
                                        <view class="pay"  @click="pay()">
                                            <text>选好了</text>
                                        </view>
                                    </block>
                                </block>
                                <block v-else>
                                    <button class="pay" hover-class="none">
                                        <text>选好了</text>
                                    </button>
                                </block>
                            </view>
                        </block>   
                    </block>
                    <block v-else>
                        <block v-if=" showGetUser_1 && showGetUserStorage == '0' ">
                            <view class="content-right" :class=" payDesc == '去结算' && !must ? 'enough' : 'not-enough' " @click="pay()">
                                <view class="pay">
                                    {{payDesc}}
                                </view>
                            </view>
                            <!-- <button class="content-right" :class=" payDesc == '去结算' && !must ? 'enough' : 'not-enough' " hover-class="none" :open-type="payDesc == '去结算' ? 'getUserInfo' : ''" @click=" payDesc == '去结算' ? 'getUserInfo()' : '' ">
                                <view class="pay">
                                    {{payDesc}}
                                </view>
                            </button> -->
                        </block>
                        <block v-else>
                            <view class="content-right" :class=" payDesc == '去结算' && !must ? 'enough' : 'not-enough' " @click="pay()">
                                <view class="pay">
                                    {{payDesc}}
                                </view>
                            </view>
                        </block>
                    </block>
            </view>
        </block>
        <block v-if="header == 'buy_together'">
                <view class="shopcart-list" :class=" header == 'buy_together' ? 'buy_together' : '' "  >
                    <view class='mask' @click='toggleList()' :style="{display:cartShow}"></view>
                    <block v-if='activeList.length>0 && totalCount_all>0'>
                        <view class="manjian_red"> 
                           {{activeList[0].text}}（满减与折扣不同享）
                        </view>
                    </block>
                    <scroll-view scroll-y="true" style="max-height:830rpx;" :scroll-into-view="toView">
                        <view class="list_item" v-for="( item,index ) in groupList" :key="index">
                            <view class="list-header" :style="{display: cartShow == 'block' ? 'flex' : cartShow }">
                                <!-- <view class="title">购物车</view> -->
                                <view class='title' v-if=" header == 'buy_together' ">
                                    <image class='face' :src="item.face"></image>
                                    <text class="nickname ellipsis">{{item.nickname}}</text>
                                    <text class="tips" v-if="index == 0">(我)</text>
                                    <text class="tips" v-if="index != 0 && item.status == 2">✓已点完</text>
                                </view>
                                <view class='title' v-else></view>
                                <view class="empty" @click="empty()" v-if="index == 0 && groupList[0].goods_list.length>0">
                                    <icon class="clear"></icon>
                                    <text>清空购物车</text>
                                </view>
                            </view>
                            <view class="list-content" :class = " index==0 ? '' : 'not_self' " :style="{display:cartShow}">
                                <block v-if="item.goods_list.length<1">
                                    <view class="list_empty">你还没有选购商品哦～</view>
                                </block>
                                <block v-else>
                                    <view class="shopcart-food" v-for="(item,index) in item.goods_list" :key="id">
                                        <view class="name">
                                            <text class="ellipsis">{{item.name}}</text>
                                            <block v-if='item.showDesc != ""'>
                                                <view>{{item.showDesc}}</view>
                                            </block>
                                        </view>
                                        <view class='info'>
                                            <view class="price" v-if="item.num > 0">
                                                <span>￥{{item.money}}</span>
                                            </view>
                                            <!--cartControl-->
                                            <view class="shopcart-wrapper" v-if="item.num > 0">
                                                <view class="cartControl">
                                                    <view>                                                                                                                  
                                                        <view class="cart-decrease" :data-id="item.id" :data-key="item.key"  @click="subCartGoods($event)">
                                                            <view class="inner"></view>
                                                        </view>
                                                        <view class="cart-count"><text>X</text>{{item.num}}</view>
                                                        <view class="cart-add" :data-id="item.id" :data-key="item.key"  @click="addCartGoods($event)"></view>
                                                    </view>
                                                </view>
                                            </view>
                                            <!--cartControl-->
                                        </view>
                                    </view>
                                </block>
                            </view>
                        </view>
                        
                        <block v-if=" packageFee>0 ">
                          <view class="list_item">
                              <view class="list-content" :style="{display:cartShow}">
                                  <view class="shopcart-food">
                                      <view class="name">
                                          <text class="ellipsis">包装费</text>
                                      </view>
                                      <view class='info'>
                                          <view class="price">
                                              <span>￥{{packageFee}}</span>
                                          </view>
                                      </view>
                                  </view>
                              </view>
                          </view>
                        </block>
                    </scroll-view>
                </view>
            </block>
            <block v-else>
                <view class="shopcart-list" >
                    <view class='mask' @click='toggleList()' :style="{display:cartShow}"></view>
                    <block v-if='activeList.length>0 && carList.length>0'>
                        <view class="manjian_red">  
                            {{activeList[0].text}}  
                        </view>
                    </block>
                    <view class="list-header" :style="{display: cartShow == 'block' ? 'flex' : cartShow }">
                        <view class='title'></view>
                        <view class="empty" @click="empty()">
                            <icon class="clear"></icon>
                            <text>清空购物车</text>
                        </view>
                    </view>
                    <view class="list-content" :style="{display:cartShow}">
                        <scroll-view scroll-y="true" style="max-height:690rpx " :scroll-into-view="toView">
                            <view class="shopcart-food" v-for="(item,index) in carList" :key="index">
                                <view class="name">
                                    <text v-if="item.goods.name" class="ellipsis">{{item.goods.name}}</text>
                                    <text v-if="item.name" class="ellipsis">{{item.name}}</text>
                                    <block v-if='item.showDesc != ""'>
                                        <view>{{item.showDesc}}</view>
                                    </block>
                                </view>

                                <view class='info'>
                                    <view class="price" v-if="item.num > 0">
                                        <span>￥{{item.money}}</span>
                                    </view>
                                    <!--cartControl-->
                                    <view class="shopcart-wrapper" v-if="item.num > 0">
                                        <view class="cartControl">
                                            <view>                                                                                                                                
                                                <view class="cart-decrease" :data-id="item.id" :data-key="item.key" :data-link="item.link" @click="subCartGoods($event)">
                                                    <view class="inner"></view>
                                                </view>
                                                <view class="cart-count">{{item.num}}</view>
                                                <view class="cart-add" :data-id="item.id" :data-key="item.key" :data-link="item.link" @click="addCartGoods($event)"></view>
                                            </view>
                                        </view>
                                    </view>
                                    <!--cartControl-->
                                </view>
                            </view>
                            <block v-if="packageFee>0 ">
                                <view style="height:30rpx; background:rgba(239, 239, 239, 1)"></view>
                                <view class="shopcart-food box_price">
                                    <view class="name">
                                        <text class="ellipsis">包装费</text>
                                    </view>
                                    <view class="info">
                                        <view class="price"><span>￥{{ packageFee }}</span></view>
                                    </view>
                                </view>
                            </block>
                        </scroll-view>
                    </view>
                </view>
            </block>
    </view>
</template>

<script>
    export default {
		name: "shop-cart",
        data() {
        	return {
        		storeInfo_1: this.storeInfo
        	}
        },
        props: {
            storeInfo: {
                type: Object,
                defalut: {}
            },
            header: {
                type: String,
                defalut: ""
            },
			totalCount: {
				type: Number,
				defalut: 0
			},
            totalCount_all: {
				type: Number,
				defalut: 0
			},
			totalPrice: {
				type: Number,
				defalut: 0
			},
			payDesc: {
				type: String,
				defalut: ""
			},
			deliveryPrice: {
				type: Number,
				defalut: 0
			},
			open_oneself: {
				type: String,
				defalut: ''
			},
			cartShow: {
				type: String,
				defalut: "none" 
			},
            carList: {
				type: Array,
				defalut: []
			},
            activeList: {
				type: Array,
				defalut: []
			},
            toView: {
				type: String,
				defalut: ''
			},
            packageFee: {
                type: Number,
				defalut: 0
            },
            groupList: {
				type: Array,
				defalut: []
			},
            self_money: {
                type: Number,
				defalut: 0
            },
            showGetUser_1:{ 
				type: Boolean,
				defalut: false
			},
            showGetUserStorage: {
				type: String,
				defalut: '0'
			},
            is_master: {
                type: Boolean,
                defalut: false
            },
            must: {
                type: Boolean,
                defalut: false
            },
            totalPrice_all: {
                type: Number,
				defalut: 0
            },
            diffPrice: {
                type: Number,
				defalut: 0
            },
            self_money: {
                type: Number,
				defalut: 0
            },
            listServiceType: {
                type: Number,
                defalut: 0
            },
            sid: {
                type: String,
                defalut: ''
            }
		},
		
		onLoad() {
				//console.log(getApp().globalData.navHeight);
		},
		methods: {
			toggleList: function(){
				this.$emit('toggleList');
			},
            empty: function(){
				this.$emit('empty');
			},
			addCartGoods: function(e){
				this.$emit('addCartGoods',e);
			},
            subCartGoods: function(e){
				this.$emit('subCartGoods',e);
			},
            pay: function(){
                this.$emit('pay');
            },
            getUserInfo:function(){
                this.$emit('getUserInfo',e);
            },
		}
    }
</script>

<style>
.shopCart {
  position: fixed;
  left: 0rpx;
  bottom: 0rpx;
  z-index: 99999;
  width: 100%;
  height: 100rpx;
}

.shopCart .content {
  display: flex;
  background: #444;
  box-shadow: 0 -4rpx 8rpx 0 rgba(0, 0, 0, 0.02);
}

.shopCart .content .content-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.shopCart .content .content-left .logo-wrapper {
  display: inline-block;
  position: relative;
  top: -24rpx;
  margin: 0 5rpx 0 22rpx;
  width: 116rpx;
  height: 116rpx;
  box-sizing: border-box;
  vertical-align: top;
  border-radius: 50%;
  background: #40404e;
  box-shadow: 0 -4rpx 8rpx 0 rgba(0, 0, 0, 0.02);
}
.shopCart .content .content-left .order_price{
    margin-bottom:20rpx;
}
.shopCart .content .content-left .white_text{
    color: #fff;
    font-weight: 500;
    font-size: 44rpx;
    height:100%;
    line-height:50rpx;
}
.shopCart .content .content-left .white_text .my_order{
    font-size: 22rpx;
    font-weight: 400;
    margin-left:10rpx;
}
.shopCart .content .content-left .gray_text{
    color: #999;
    font-size: 22rpx;
}

.shopCart .content .content-left .logo-wrapper .num {
  position: absolute;
  top: 0;
  right: 0;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 50%;
  font-size: 22rpx;
  color: #fff;
  background: #ff4f54;
}

.shopCart .content .content-left .logo-wrapper .logo {
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 50%;
}

.weidian {
  background: url(http://img1.birdback.org/a/33/eb/33eb0ac638830487beb03f9b58fede93.png) no-repeat;
  background-size: 100% 100%;
}

.yidian {
  background: url(http://img1.birdback.org/a/a3/6b/a36b165ce4e3ed390073b946f10218df.png) no-repeat;
  background-size: 100% 100%;
}

.shopCart .content .content-left .price {
  display: inline-block;
  vertical-align: top;
  padding-right: 24rpx;
  box-sizing: border-box;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 32rpx;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom:12rpx;
}

.shopCart .content .content-left .price.highlight {
  color: #fff;
}

.shopCart .content .content-left .desc {
  display: inline-block;
  vertical-align: top;
  margin-left: 24rpx;
  color: #999;
  font-size: 24rpx;
  margin-bottom:12rpx
}

.shopCart .content .content-right {
  flex: 0 0 250rpx;
  width: 250rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius:0;
}

.shopCart .content .content-right .pay,.shopCart .content .content-right .pay text {
    text-align: center;
    width: 100%;
    height:100rpx;
    display:flex;
    align-items:center;
    justify-content: center;
}


.shopCart .content .not-enough,.shopCart .content .not-enough .pay {
  background: #333;
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #999;
  line-height: 32rpx;
  font-weight: 500;
}

.shopCart .content .enough {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #40404e;
  line-height: 32rpx;
  background-image: linear-gradient(-123deg, #a0f4c9 0%, #73e9da 100%);
}

.shopCart .ball-container .ball {
  position: fixed;
  left: 32px;
  bottom: 22px;
  z-index: 200;
  transition: all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41);
}

.shopCart .ball-container .ball .inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(0, 160, 220);
  transition: all 0.4s linear;
}

.mask {
  position: absolute;
  width: 100%;
  height: 2000rpx;
  top: -2000rpx;
  background: #000;
  opacity: 0.5;
}

.shopCart .shopcart-list {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  transform: translate3d(0, -100%, 0);
}


.shopCart .shopcart-list.buy_together .list_item{
    margin-bottom:30rpx;
}
.shopCart .shopcart-list.buy_together{
      background:#efefef;
      top: 30rpx;
} 

/* .shopCart .shopcart-list :fade-enter-active, :fade-leave-active {
  transition: all 0.5s transform translate3d(0, -100%, 0);
}

.shopCart .shopcart-list :fade-enter, :fade-leave-active {
  transform: translate3d(0, 0, 0);
} */

.shopCart .shopcart-list .list-header {
  height: 80rpx;
  background: #f8f8f8;
  border-bottom: 1px solid #ECEBEB;
  text-align:right;
  padding-right:24rpx;
}

.shopCart .shopcart-list .list-header .empty {
  font-size: 30rpx;
  color: #999;
  line-height: 80rpx;
  display:flex;
  align-items: center;
  width:200rpx;
}
.shopCart .shopcart-list .list-header .empty .clear{
    margin-right: 14rpx;
}

.shopCart .shopcart-list.buy_together .list-header{
    display: flex;
    justify-content: space-between;
    align-items:center;
    border-bottom:0;
}
.shopCart .shopcart-list.buy_together .list-content .shopcart-food {
    border-bottom:0;
}
.shopCart .shopcart-list .list-header .title {
    display: flex;
    flex:1;
    align-items:center;
}
.shopCart .shopcart-list.buy_together .list-header .title .face{
    width:46rpx;
    height: 46rpx;
    border-radius: 100%;
    margin:0 10rpx 0 24rpx;
    background:#000;
}
.shopCart .shopcart-list.buy_together .list-header .title .nickname{
    font-size: 28rpx;
    color: #333;
}
.shopCart .shopcart-list.buy_together .list-header .title .tips{
    font-size: 24rpx;
    color: #999;
    margin-left: 20rpx;
}
.shopCart .shopcart-list .list-content {
  max-height: 690rpx;
  overflow-y: auto;
  background: #fff;
}
.shopCart .shopcart-list .list-content.not_self .cart-decrease, .shopCart .shopcart-list .list-content.not_self .cart-add{
    display: none;
}
.shopCart .shopcart-list .list-content.not_self .cart-count text{
    display: inline-block;
    margin-right:15rpx;
}

.shopCart .shopcart-list .list-content .shopcart-food {
  height: 120rpx;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: row;
  position:relative;
  margin:0 24rpx;
}
.shopCart .shopcart-list .list-content .shopcart-food:last-child{
    margin-bottom: 30rpx;
}
.shopCart .shopcart-list.buy_together .list-content .shopcart-food:last-child{
    margin-bottom: 0rpx;
}
.list_empty{
    width:100%;
    height: 156rpx;
    background: #fff;
    color: #999;
    font-size: 24rpx;
    text-align: center;
    line-height: 156rpx;
}

.shopCart .shopcart-list .list-content .shopcart-food .name {
  font-family: PingFangSC-Medium;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 55%;
}

.shopCart .shopcart-list .list-content .shopcart-food .name text {
  font-size: 32rpx;
  color: #333;
}

.shopCart .shopcart-list .list-content .shopcart-food .name view {
  font-size:24rpx;
  color:#999999;
  margin-top:20rpx;
}

.shopCart .shopcart-list .list-content .shopcart-food .info {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.shopCart .shopcart-list .list-content .shopcart-food .price {
  position: absolute;
  right: 220rpx;
  top: 44rpx;
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #ff4f54;
  text-align: right;
  line-height: 32rpx;
}

.shopCart .shopcart-list .list-content .shopcart-food .cartControl-wrapper {
  position: absolute;
  right: 0;
  bottom: 6px;
}
.shopcart-wrapper {
  position: absolute;
  right: 0rpx;
  top: 36rpx;
}

.shopcart-wrapper .inner {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  vertical-align: top;
  background: url(http://juhuijia2.birdback.org/mapi/i/diandan_jian@3x.png)no-repeat;
  background-size: 100% 100%;
}

.shopcart-wrapper .cart-count {
  display: inline-block;
  margin: 0 20rpx;
  height: 50rpx;
  vertical-align: top;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #545455;
  line-height: 50rpx;
}
.shopcart-wrapper .cart-count text{
    display: none;
}

.shopcart-wrapper .cart-add {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  vertical-align: top;
  background: url(http://img1.birdback.org/a/b3/4d/b34dde29c422f07d5e46a4faff7538da.png) no-repeat;
  background-size: 100% 100%;
}

.shopcart-wrapper .cart-decrease, .cart-add {
  display: inline-block;
}

.shopcart-wrapper .cart-decrease {
  transition: all 0.4s linear;
}

.shopcart-wrapper .cartControl .cart-decrease {
  opacity: 0 transform translate3d(24px, 0, 0);
}

.manjian_red{
    width:100%;
    height: 50rpx;
    background: #FFE6DE;
    color: #333;
    font-size:22rpx;
    text-align:center;
    line-height:50rpx;
}

.closed_banner{
    width:100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
}
</style>
